import React from 'react';
import axios from 'axios'
import './homespecial.scss'

export default class Homespecial extends React.Component{
    constructor(props){
        super(props)
        this.state={
            specialList:[]
        }
    }
    componentDidMount(){
        axios.get('https://apipc-xiaotuxian-front.itheima.net/home/special').then((res)=>{
            if(res.data){
                this.setState({
                    specialList:res.data.result
                })
            }
        })
    }
    render(){
        const {specialList} = this.state
        return(
            <div className='homespecial'>
                <div id="app">
                    <div className="content">
                        <div className="head">
                            <h3>
                                最新专题
                            </h3>
                            <span>查看全部<i></i></span>
                        </div>
                        <ul>
                            {
                                specialList&&specialList.map((A,index)=>{
                                    return (
                                        <li key={index}>
                                            <div className="img">
                                            </div>
                                                <img src={A.cover} alt="" />
                                            <div className="imgb">
                                                <p className="title">
                                                    <span>{A.title}</span>
                                                    <span>{A.summary}</span>
                                                </p>
                                            </div>
                                            <div className="jiage">￥{A.lowestPrice}</div>
                                            <div className="bottom">
                                                <span>♥ {A.collectNum}</span>
                                                <span>👀 {A.viewNum}</span>
                                                <span>ℹ {A.replyNum}</span>
                                            </div>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                </div>
            </div>
        )
    }
}